<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度账号注册</title>
    <style>
         .text_input {
            display: block;
            position: relative;
            height: 20px;
            padding: 10px 8px;
            border: 1px solid #ddd;
            font-size: 14px;
            color: #666;
            width: 328px;
            float: left;
             transition: .3s;

        }
        .label1 {
            display: block;
            float: left;
            height: 42px;
            width: 65px;
            margin-right: 10px;
            line-height: 42px;
            font-size: 14px;
            color: #666;
            font-weight: 700;
            text-align: right;
        }
        .text_input2 {
            display: block;
            position: relative;
            float: left;
            height: 16px;
            width: 156px;
            padding: 11px 10px;
            margin-right: 10px;
            border: 1px solid #ddd;
            font-size: 14px;
            color: #666;
            transition: .3s;
        }
        .text_button {
            border-radius: 0;
            border: 1px solid #ddd;
            height: 40px;
            background: #f7f7f7;
            color: #666;
            font-weight: 400;
            width: 160px;
            float: left;
            margin-right: 10px;
            font-size: 14px;

    }
        .label2{
            margin-left: 75px;
            position: relative;
            clear: both;
            margin-bottom: 20px;
            zoom: 1;
            font-size: 12px;
        }
        a{
            text-decoration: none;
            color: #1b66c7;
        }
        .button2{
            margin-left: 75px;

            display: block;
            font-size: 16px;
            font-weight: 700;
            border-radius: 3px;

            height: 50px;
            color: #fff;
            cursor: pointer;
            text-align: center;
            border: 0;
            background: url(http://passport.baidu.com/static/passpc-base/img/ui/button_icon.png) no-repeat 0 0;
            line-height: 32px;

            width: 350px;
            background: #3f89ec;
        }
    </style>
    <script>
        function myJudge() {
            var desc=document.getElementById("desc");
            var text1=document.getElementById("text1");
            if (text1.value==""){
                desc.innerHTML = "";
                desc.style="";
            }
            else if (text1.value.length<7 ||text1.value.length>10 ){
                desc.style="background: url(\"img/err_small.png\") no-repeat left;color:red;font-size: 12px;line-height: 40px;float: left;margin-left: 10px;padding-left: 20px;";
                desc.innerHTML = "用户名不能低于7个或超过10个字符";
            }
            else if (text1.value.length>=7 ||text1.value.length<=10 ){
                desc.style="background: url(\"img/ok_small.png\") no-repeat left;line-height: 40px;float: left;margin-left: 10px;padding-left: 20px;";
                desc.innerHTML = "&nbsp";
            }
//            var desc=document.getElementById("desc");
//            desc.innerHTML="设置后不可更改，长度7-10";
//            desc.style="font-size: 12px;line-height: 40px;float: left;margin-left: 10px;color:#CCCCCC";

        }
//        function hint() {
//            var para =document.createElement("span");
//            var node =document.createTextNode("设置后不可更改，长度7");
//            para.appendChild(node);
//            para.style="font:8px;line-height: 40px;height:40px";
//
//            var element1 =document.getElementById("all");
//            var child =document.getElementById("text1_1");
//            element1.insertBefore(para,child)
//        }
        function hint() {
            var desc=document.getElementById("desc");
            desc.innerHTML="设置后不可更改，长度7-10";
            desc.style="font-size: 12px;line-height: 40px;float: left;margin-left: 10px;color:#CCCCCC";

        }
    </script>
</head>

<body>
    <form method="post" id="all">
        <label class="label1" for="text1">用户名</label>
        <input onclick="hint()" onblur="myJudge()" id="text1" class="text_input" type="text" name="userName" placeholder="请设置用户名" required><span id="desc"></span><br id="text1_1"><br><br>
        <label class="label1" for="text2">手机号</label>
        <input id="text2" class="text_input" type="number" name="iphone" placeholder="可用于登录和找回密码" required><br><br><br>
        <label class="label1" for="text3">&nbsp;密码</label>
        <input id="text3" class="text_input" type="password" name="password" placeholder="可用于登录和找回密码" required><br><br><br>
        <label class="label1" for="text4">验证码</label>
        <input id="text4" class="text_input2" type="text" name="verifyCode" maxlength="6" placeholder="请输入验证码" required>
        <input class="text_button" type="button" value="获取短信验证码"><br><br><br>

        <p class="label2">
            <input name="isAgree" id="isAgree" type="checkbox" autocomplete="off">
            <label  for="isAgree">阅读并接受</label>
            <a target="_blank" href="http://passport.baidu.com/static/passpc-account/html/protocal.html">《百度用户协议》</a>及<a target="_blank" href="https://www.baidu.com/duty/yinsiquan.html">《百度隐私权保护声明》</a>
            <a><span></span></a>
        </p>

        <input type="submit" value="注册" class="button2">
    </form>
</body>
</html>